<template>
  <div class="designer-main chart-full" style="display: flex; overflow-y: hidden">
    <div style="height: 100%; width: 200px; border-right: 1px solid #d7dde4">
      <div style="height: 32px; padding: 8px">mate-parser</div>
      <div style="overflow-y: auto; height: calc(100% - 32px)">
        <div style="padding: 0 8px">
          <div v-for="item in fileList" :key="item.name" class="file-item" @click="chooseFile(item)">
            <div :title="item.name" class="ellipsis">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: relative; height: 100%; width: calc(100% - 200px)">
      <Tabs class="tabs-large" :value="curTab" @on-click="changeTab">
        <Tab-pane label="概览" name="infoFile"></Tab-pane>
        <Tab-pane label="读取" name="loadFile"></Tab-pane>
        <Tab-pane label="解析" name="descFile"></Tab-pane>
        <Tab-pane label="设计" name="mateFile"></Tab-pane>
      </Tabs>
      <div v-if="curTab === 'infoFile'" style="padding: 0 16px">
        <mate-form-0></mate-form-0>
      </div>
      <div v-if="curTab === 'loadFile'" style="padding: 0 16px">
        <Input v-model="curFileText" type="textarea" :rows="30" />
      </div>
      <div v-if="curTab === 'descFile'" style="padding: 0 16px">
        <mate-form-2></mate-form-2>
      </div>
      <div v-if="curTab === 'mateFile'" style="padding: 0 16px">
        <mate-form-3></mate-form-3>
      </div>
    </div>
  </div>
</template>

<script>
import localforage from 'localforage';

import MateForm0 from './MateForm0.vue';
import MateForm2 from './MateForm2.vue';
import MateForm3 from './MateForm3.vue';
import voca from 'voca';

export default {
  name: 'MateParser',
  components: {
    MateForm0,
    MateForm2,
    MateForm3,
  },
  data() {
    return {
      curTab: 'infoFile',
      fileList: [],
    };
  },
  computed: {
    curFile: function () {
      return this.$store.state.curFile;
    },
    curFileText: function () {
      return this.$store.state.curFileText;
    },
  },
  methods: {
    changeTab(paramObj) {
      this.curTab = paramObj;
      if (this.curFile) {
        this.execTab();
      }
    },
    execTab() {},
    infoFile() {
      // debugger;
    },
    chooseFile(paramObj) {
      localforage.getItem(paramObj.fileKey).then(file => {
        this.$store.commit('setCurFile', file);
        this.loadFile(file);
        if (this.curFile) {
          this.execTab();
        }
      });
    },
    loadCol() {
      if (this.curFile.type === 'text/csv') {
        const dbIndex = this.curFileText.indexOf('\r\n');
        const splitChar = dbIndex > -1 ? '\r\n' : '\n';
        const allRows = voca.split(this.curFileText, splitChar);
        const colArray = allRows[0].split(',');
        this.$store.commit('setHeaderOrigin', colArray);
      }
    },
    loadFile(file) {
      if (file) {
        const _this = this;
        let reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function (fileValue) {
          _this.$store.commit('setCurFileText', fileValue.target.result);
          _this.loadCol();
        };
      }
    },
    getFileList() {
      localforage.getItem('_folderList').then(retObj => {
        const pointFolder = retObj[0].children.find(item => {
          return item.title === 'mate-parser';
        });
        if (pointFolder) {
          this.fileList = pointFolder.children.map(item => {
            item.fileInfo.fileKey = item.fileKey;
            return item.fileInfo;
          });
        }
      });
    },
  },

  mounted() {
    this.getFileList();
  },
};
</script>

<style scoped>
.tool-bar {
  display: flex;
}
.form-label {
  margin-right: 8px;
}
.form-label:after {
  content: ':';
}

.file-item {
  cursor: pointer;
  padding: 4px;
  margin-bottom: 4px;
  border: #cccccc 1px solid;
}
.file-item:hover {
  color: #2185f0;
}
.ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
